/**
* 路由总配置
*
**/
<template>
  <el-container class="layout-container">
    <aside-bar/>
    <el-container class="content-wrapper">
      <header-bar/>
      <mains/>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
import HeaderBar from '../components/HeaderBar.vue'
import AsideBar from '../components/AsideBar.vue'
import Mains from '../components/Main.vue'
import router from "../router";
import {useUserInfo} from '../stores/userInfo'
import {useEventListener} from '@vueuse/core'
import {useConfig} from "../stores/config";

const config = useConfig()

const userInfo = useUserInfo()

onMounted(() => {
  if (!userInfo.$state.token) {
    router.push('/login')
  }
})
onBeforeMount(() => {
  onAdaptiveLayout()
  //事件监听
  useEventListener(window, 'resize', onAdaptiveLayout)
})
const onAdaptiveLayout = () => {
  // 监听屏幕可视宽度
  const clientWidth = document.body.clientWidth
  let defaultBeforeResizeLayout = {
    layoutMode: config.layout.layoutMode,
    menuCollapse: config.layout.menuCollapse,
  }
  if (clientWidth < 1024) {
    config.setLayout('menuCollapse', true)
    config.setLayout('shrink', true)
    config.setLayoutMode('Classic')
  } else {
    config.setLayout('menuCollapse', defaultBeforeResizeLayout.menuCollapse)
    config.setLayout('shrink', false)
    config.setLayoutMode(defaultBeforeResizeLayout.layoutMode)
  }
}
</script>

<style scoped>
.layout-container {
  height: 100%;
  width: 100%;
}

.content-wrapper {
  flex-direction: column;
  width: 100%;
  height: 100%;
}
</style>

